<template>
	<conf-module-container :show-page-tools="true">
		<template #Slot-Conf-Module-Header>
			<p class="title font-20-bold">报警通知</p>
		</template>

		<template #Slot-Conf-Module-Tools-Left>
			<div class="tools">
				<global-input-search
					v-model:value="tableAttr.searchObj.name"
					placeholder="配置名称"
					@search="setTableData(true)"
				></global-input-search>
				<a-select
					ref="select"
					v-model:value="tableAttr.searchObj.status"
					placeholder="状态"
					style="width: 128px; margin-left: 8px"
					allow-clear
					@change="(statu: any) => changeStatus(statu)"
				>
					<!-- @change="setTableData(true)" -->
					<a-select-option value="1">启用</a-select-option>
					<a-select-option value="0">禁用</a-select-option>
				</a-select>
				<a-select
					ref="select"
					v-model:value="tableAttr.searchObj.type"
					placeholder="类型"
					style="width: 128px; margin-left: 8px"
					allow-clear
					@change="(type: any) => changetType(type)"
				>
					<a-select-option value="1">硬件报警</a-select-option>
					<a-select-option value="0">算法报警</a-select-option>
				</a-select>
			</div>
		</template>

		<template #Slot-Conf-Module-Tools-Right>
			<a-button v-if="g6Permission.showBtn('add-alarm-notices')" type="primary" @click="PageButtonClick('add-alarm-notices')">
				新增
			</a-button>
		</template>

		<template #Slot-Conf-Module-Content>
			<div class="_table">
				<global-table
					:data-source="tableAttr.data"
					:loading="tableAttr.loading"
					:columns="columns"
					:show-operation="true"
					:use-select="false"
				>
					<template #operation="{ record }">
						<div class="operations">
							<div
								v-if="g6Permission.showBtn('enable-disable')"
								class="font-14 operation-item-btn"
								@click="PageButtonClick('enable-disable', record)"
							>
								{{ record.status === 0 ? '启用' : '禁用' }}
							</div>
							<div
								v-if="g6Permission.showBtn('edit-alarm-notices')"
								class="font-14 operation-item-btn"
								@click="PageButtonClick('edit-alarm-notices', record)"
							>
								编辑
							</div>
							<div
								v-if="g6Permission.showBtn('single-delete')"
								class="font-14 operation-item-btn"
								@click="PageButtonClick('single-delete', record)"
							>
								删除
							</div>
						</div>
					</template>

					<template #type="{ record }">
						<div>{{ record.type === 0 ? '算法报警' : '硬件报警' }}</div>
					</template>

					<template #status="{ record }">
						<div>{{ record.status === 0 ? '禁用' : '启用' }}</div>
					</template>

					<template #notifyTypeStr="{ record }">{{ record.notifyTypeStr === '1' ? '公众号' : '' }}</template>

					<template #aiNameList="{ record }">
						<a-tooltip>
							<div class="typestr ellipsis-text" style="width: auto">{{ record.aiNameList.join(',') }}</div>
							<template #title>
								<div class="ellipsis-text">{{ record.aiNameList.join(',') }}</div>
							</template>
						</a-tooltip>
					</template>

					<template #notifyPersonList="{ record }">
						<a-tooltip>
							<div class="typestr">{{ String(record.notifyPersonList.map((v: any) => v.userName)) }}</div>
							<template #title>
								<div>{{ String(record.notifyPersonList.map((v: any) => v.userName)) }}</div>
							</template>
						</a-tooltip>
					</template>
				</global-table>

				<global-pagination
					:current="tableAttr.current"
					:page-size="tableAttr.pageSize"
					:total="tableAttr.total"
					@change="setTablePagination"
				></global-pagination>
			</div>
		</template>
	</conf-module-container>
</template>

<script setup lang="ts" name="alarm-notices-table">
import { g6UseTable } from 'glasssix-vue3-hooks';
import { g6Permission, g6StorageValue } from 'glasssix-utils-ts';
import { useDeleteModal } from '@/global-hooks/base.hooks';
import { ConfModuleContainer } from '../../components/index';
import { AlarmNoticeAPI } from '../../api';

const $message: any = inject('$message');
const { setOpenDeleteModal } = useDeleteModal();
const { tableAttr, setTableData, setTablePagination } = g6UseTable(AlarmNoticeAPI.list);

const router = useRouter();
const columns: TsGlobalType.TsTableColumn[] = [
	{ dataIndex: 'name', title: '配置名称', width: 150, ellipsis: true },
	{ dataIndex: 'type', title: '类型', width: 150, custom: true, ellipsis: true },
	{ dataIndex: 'notifyTypeStr', title: '通知方式', ellipsis: true, width: 150, custom: true },
	{ dataIndex: 'areaName', title: '所属区域', width: 200, ellipsis: true },
	{ dataIndex: 'aiNameList', title: '通知算法', width: 150, ellipsis: true, custom: true },
	// { dataIndex: 'status', title: '状态', custom: true, width: 108, ellipsis: true },
	{ dataIndex: 'versionDescription', title: '报警设备', width: 200, ellipsis: true },
	{ dataIndex: 'notifyPersonList', title: '通知人', ellipsis: true, width: 200, custom: true },
	{ dataIndex: 'status', title: '状态', ellipsis: true, width: 150, custom: true } // 0=禁用，1=启用
];

const PageButtonClick = (btnCode: string, record: Record<string, any> = {}): void => {
	if (btnCode === 'add-alarm-notices') {
		router.push('/config-manage/alarm-notices/add');
	}
	if (btnCode === 'edit-alarm-notices') {
		router.push(`/config-manage/alarm-notices/update?id=${record.id}`);
	}
	if (btnCode === 'single-delete') {
		const deleteFun = async (): Promise<void> => {
			let res: TsRes = await AlarmNoticeAPI.delete([record.id]);
			if (res.code === 0) {
				tableAttr.data = tableAttr.data.filter((row: Record<string, any>) => row.id !== record.id);
				tableAttr.total = tableAttr.total - 1;
				$message.success('删除成功');
			}
		};
		const deleteModalInfo = { title: '确认删除？', contentText: '删除后不可恢复，请谨慎操作！', okText: '删除', cancelText: '取消' };
		setOpenDeleteModal(deleteFun, deleteModalInfo);
	}
	if (btnCode === 'enable-disable') {
		// 0=禁用，1=启用
		const enableModalInfo = { title: '确认启用?', contentText: '启用后将收到通知', okText: '确认', cancelText: '取消' };
		const disableModalInfo = { title: '确认禁用?', contentText: '禁用后将无法收到通知', okText: '确认', cancelText: '取消' };
		const EnableDisableFun = async (): Promise<void> => {
			const param = {
				id: record.id,
				status: record.status === 0 ? 1 : 0
			};
			let res: TsRes = await AlarmNoticeAPI.updateStatus(param);
			if (res.code === 0) {
				$message.success(res.message);
				setTableData();
			}
		};
		if (record.status === 0) {
			setOpenDeleteModal(EnableDisableFun, enableModalInfo);
		} else {
			setOpenDeleteModal(EnableDisableFun, disableModalInfo);
		}
		// record.status === 1 ? setOpenDeleteModal(EnableDisableFun, enableModalInfo) : setOpenDeleteModal(EnableDisableFun, disableModalInfo);
	}
};
const changeStatus = (obj: number) => {
	setTableData(true);
	g6StorageValue.save('session', 'noticesStatus', obj);
	if (obj === undefined || obj === null) {
		g6StorageValue.delete('session', 'noticesStatus');
	}
};
const changetType = (obj: number) => {
	setTableData(true);
	g6StorageValue.save('session', 'noticesType', obj);
	if (obj === undefined || obj === null) {
		g6StorageValue.delete('session', 'noticesType');
	}
};
onMounted(() => {
	tableAttr.searchObj.status =
		g6StorageValue.get('session', 'noticesStatus') !== null ? String(g6StorageValue.get('session', 'noticesStatus')) : undefined;
	tableAttr.searchObj.type =
		g6StorageValue.get('session', 'noticesType') !== null ? String(g6StorageValue.get('session', 'noticesType')) : undefined;
	setTableData();
});
</script>

<style lang="less" scoped>
.title {
	color: rgba(240, 246, 252, 0.95);
}

.ellipsis-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-break: break-all;
}

.tools {
	display: flex;

	:deep(.ant-select) {
		.ant-select-selector {
			height: 36px !important;
		}
	}
}

.typestr {
	overflow: hidden; //超出部分隐藏
	width: 400px;
	white-space: nowrap; //不换行
	text-overflow: ellipsis; //文本溢出显示省略号
}

._table {
	display: flex;
	height: calc(100vh - 76px - 44px - 160px);
	padding: 20px 0 0;
	flex-direction: column;
	justify-content: space-between;
}
</style>
